<template>
  <div class="pay-order">
    <!-- LOGO 步骤条 -->
    <div class="width_1200 logo">
      <div class="toolItem">
        <svg class="icon-third" aria-hidden="true" style="font-size: 8px">
          <use xlink:href="#icon-third-goumailiang"></use>
        </svg>
        <span class="toolTitle" style="font-size: 20px;margin-left: 10px">结算页</span>
      </div>
      <div class="cart-steps">
        <a-steps
            :current="1"
            :items="[
            {
              title: '我的购物车',
            },
            {
              title: '填写订单信息',
            },
            {
              title: '成功提交订单',
            },
          ]"
            v-if="way==1"
        ></a-steps>
        <a-steps
            :current="0"
            :items="[
            {
              title: '填写订单信息',
            },
            {
              title: '成功提交订单',
            },
          ]"
            v-else-if="way==2"
        ></a-steps>
      </div>
    </div>
    <a-divider/>
    <div class="content width_1200">
      <!-- 商品信息 -->
      <div class="goods-content">
        <div class="card-head mt_20 mb_20">
          <span>商品信息</span>
          <span @click="$router.push('/mall/cart')">返回购物车</span>
        </div>
        <div class="goods-msg" v-for="(shop, shopIndex) in goodsList" :key="shopIndex">
          <div>
            <div class="goods-list">
              <div class="goods-item" v-for="(goods, goodsIndex) in shop.skuList" v-if="shop?.skuList?.length > 0"
                   :key="goodsIndex">
                <div class="hover-color" @click="goGoodsDetail(goods.goodsId)" style="width: 490px">
                  <div class="flex">
                    <div>
                      <img :src="getFileAccessHttpUrl(goods.goodsImage)" alt=""/>
                    </div>
                    <div style="margin-left: 10px">
                      <div>{{ goods.goodsName }}</div>
                      <p v-html="goods.skuSpec" class="skuSpecClass"/>
                    </div>
                  </div>
                </div>
                <span class="goods-price">{{ unitPrice(goods.purchasePrice, '￥', '') }}</span>
                <span>x{{ goods.number }}</span>
                <span class="goods-price">{{ unitPrice(goods.subTotal, '￥', '') }}</span>
              </div>
            </div>
            <div class="order-mark">
              <a-textarea maxlength="60" v-model:value="shop.remark" showCount placeholder="订单备注"/>
              <span style="font-size: 12px; color: #999">提示：请勿填写有关支付、收货、发票方面的信息</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 发票信息 -->
<!--      <div class="invoice">
        <div class="card-head mt_20 mb_20">
          <span class="relative">发票信息
            <span class="inv-tips">
              <InfoCircleFilled style="color: #3875f6;margin-right: 5px;font-size: 15px"/>开企业抬头发票须填写纳税人识别号，以免影响报销
            </span>
          </span>
        </div>
        <div class="inovice-content">
          <span>{{ invoiceData.invoiceTitle }}</span>
          <span>{{ invoiceData.invoiceContent }}</span>
          <span @click="editInvoice">编辑</span>
        </div>
      </div>-->

      <!-- 订单价格 -->
      <div class="order-price">
        <div>
          <span style="font-weight: 700;color: red;margin-right: 3px">{{
              checkedGoodsNumber
            }}</span>件商品，总商品金额：<span>{{ unitPrice(checkTotalPrice, '￥', '') }}</span>
        </div>
        <div>
          <span>应付金额：</span><span class="actrual-price">
            {{ unitPrice(totalPrice, '￥', '') }}
          </span>
        </div>
      </div>
    </div>
    <!-- 底部支付栏 -->
    <div class="order-footer width_1200">
      <div class="pay ml_20" @click="pay">提交订单</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { CheckOutlined } from "@ant-design/icons-vue";

import { onMounted, reactive, ref } from "vue";
import { unitPrice } from "@/utils";
import { cartGoodsChecked } from "@/api/cart";
import { createOrder } from "@/api/order";
import { getFileAccessHttpUrl } from "@/utils/compUtils";
import { useMessage } from "@/hooks/web/useMessage";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();
const {createConfirm} = useMessage();
const {createMessage} = useMessage();

const way: any = route.query?.way; //下订单方式： 1：购物车，2：立即购买
const goodsId: any = route.query?.goodsId;

const freight = ref<number>(0);//运费
const showInvoice = ref<boolean>(false);

const checkTotalPrice = ref<any>(0);
const checkedGoodsNumber = ref<any>(0);
const totalPrice = ref<any>(); //总价
const stepIndex = ref<any>(1); // 顶部步骤条状态

const pageInfo = ref<{
  pageNo: number;
  pageSize: number;
  name: string;
}>({
  // 当前页码
  pageNo: 1,
  // 当前每页显示多少条数据
  pageSize: 10,
  name: '',
});
const invoiceData = reactive<any>({
  // 发票数据
  invoiceTitle: "个人",
  invoiceContent: "不开发票",
});

const selectedInvoice = ref<any>(); // 发票
const goodsList = ref<any>([]); // 商品列表
const invoiceId = ref<any>("");
const storeId = ref<any>(''); //店铺Id

onMounted(() => {
  init()
})

// 初始化数据
function init() {
  getGoodsDetail();
}

async function getGoodsDetail() {
  let params = {
    way: way,
    goodsId: goodsId,
    number: 1
  }
  // 订单商品详情
  const data: any = await cartGoodsChecked(params)
  goodsList.value = data.result.cartList;
  checkedGoodsNumber.value = data.result.checkedGoodsNumber
  checkTotalPrice.value = data.result.checkTotalPrice;
  totalPrice.value = checkTotalPrice.value + freight.value
}


function cancelInvoice() {
  showInvoice.value = false
}

async function reloadInvoice(invoice) {
  cancelInvoice()
  selectedInvoice.value = invoice
  invoiceData.invoiceTitle = invoice.invoiceTitle
  invoiceData.invoiceContent = invoice.invoiceContent
}

// 跳转商品详情
function goGoodsDetail(goodsId) {
  let routeUrl = router.resolve({
    path: `/mall/goods/detail/${goodsId}`,
  });
  window.open(routeUrl.href, "_blank");
}

function editInvoice() {
  // 编辑发票信息
  showInvoice.value = true;
  invoiceId.value = selectedInvoice.value?.id
}

async function pay() {
  const params = {
    clientType: "PC",
    way: way,
    goodsId: goodsId,
    number: 1
  };
  const data: any = await createOrder(params)
  await router.push({
    path: `/mall/thirdPay/${data.result}`,
  });
}
</script>

<style scoped lang="scss">
@import "@/assets/style/course/global.scss";
@import "@/assets/style/course/coupon.scss";

.pay-order{
  min-height: 89vh;
}
.goods-msg {
  overflow: hidden;
}

/** logo start */
.logo {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px auto 0;

  div:nth-child(1) {
    display: flex;
    justify-content: space-between;
    align-items: center;

    img {
      width: 150px;
      height: auto;
      cursor: pointer;
    }

    div:nth-child(2) {
      width: 200px;
      color: #999;
      font-size: 16px;
      margin: 0 20px;

      span {
        color: $theme_color;
      }
    }
  }
}

.cart-steps {
  height: 30px;
  display: flex;
  align-items: center;

  span {
    @include content_color($light_content_color);
    height: 30px;
    text-align: center;
    line-height: 30px;
    display: inline-block;
    padding: 0 15px;
  }

  .ivu-icon {
    @include content_color($light_content_color);
    font-size: 20px;
    margin: 0 15px;
  }

  .active {
    border-radius: 50px;
    background-color: #ff8f23;
    color: #fff;
  }

  .active-arrow {
    color: #ff8f23;
  }
}

/** logo end */
/** content start */
.content {
  margin: 20px auto;
  background-color: #fff;
  min-height: 200px;
  padding: 15px 25px;
}

.delivery-method {
  display: flex;
  flex-wrap: wrap;

  > div {
    border: 1px dotted #949494;
    width: 70px;
    height: 40px;
    margin: 20px 20px 0 0;
    padding: 10px;
    cursor: pointer;
    color: #999;
  }

  .method-item {
    position: relative;
    font-size: 12px;

    > div:nth-child(1) {
      margin-bottom: 10px;

      span {
        margin-right: 10px;
      }

      > span:nth-child(1) {
        color: #000000;
        font-size: 14px;
      }
    }

    .edit-btn {
      font-size: 12px;
      position: absolute;
      top: 15px;
      right: 20px;
      color: $theme_color;

      span:hover {
        border-bottom: 1px solid $theme_color;
      }
    }

    .corner-icon {
      position: absolute;
      right: -1px;
      bottom: -1px;

      div {
        width: 0;
        border-top: 20px solid transparent;
        border-right: 20px solid $theme_color;
      }

      .ivu-icon {
        font-size: 12px;
        position: absolute;
        bottom: 0;
        right: 1px;
        transform: rotate(-15deg);
        color: #fff;
      }
    }
  }

  .border-red {
    border-color: $theme_color;
  }
}

/** 地址管理 */
.address-manage {
  display: flex;
  flex-wrap: wrap;

  > div {
    border: 1px dotted #949494;
    width: 265px;
    height: 120px;
    margin: 20px 20px 0 0;
    padding: 10px;
    cursor: pointer;
    color: #999;
  }

  .add-address {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .ivu-icon {
      font-size: 24px;
    }

  }

  .address-item {
    position: relative;
    font-size: 12px;

    > div:nth-child(1) {
      margin-bottom: 10px;

      span {
        margin-right: 10px;
      }

      > span:nth-child(1) {
        color: #000000;
        font-size: 14px;
      }
    }

    .edit-btn {
      font-size: 12px;
      position: absolute;
      top: 15px;
      right: 20px;
      color: $theme_color;

      span:hover {
        border-bottom: 1px solid $theme_color;
      }
    }

    .corner-icon {
      position: absolute;
      right: -1px;
      bottom: -1px;

      div {
        width: 0;
        border-top: 20px solid transparent;
        border-right: 20px solid $theme_color;
      }

      .ivu-icon {
        font-size: 12px;
        position: absolute;
        bottom: 0;
        right: 1px;
        transform: rotate(-15deg);
        color: #fff;
      }
    }
  }

  .border-red {
    border-color: $theme_color;
  }
}

/** 购买商品列表 start */
.shop-name {
  display: flex;
  justify-content: space-between;

  > span:nth-child(1) {
    font-weight: bold;

    .ivu-icon {
      color: #ff8f23;

      &:hover {
        color: $theme_color;
      }
    }
  }

  > span:nth-child(2) {
    color: #999;
    position: relative;
    display: flex;
    width: 200px;
  }

  .delivery-list {
    position: absolute;
    right: 0;
    top: 20px;
    background-color: #f3fafe;
    box-shadow: 0px 0px 5px #b9b2b2;
    display: flex;
    flex-wrap: wrap;
    width: 200px;
    min-height: 100px;
    padding: 10px;

    li {
      width: 90px;
      height: 30px;
      text-align: center;

      &:hover {
        cursor: pointer;
      }
    }
  }
}

.goods-list {
  width: 1150px;
  background-color: #f8f8f8;
  margin: 10px 0 20px 0;

  .goods-item {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    margin: 0 20px;
    border-bottom: 1px dotted #999;

    &:last-child {
      border: none;
    }

    img {
      width: 70px;
      height: 70px;
    }

    > span {
      text-align: center;
      width: 100px;
    }

    > span:nth-child(1) {
      font-size: 12px;

      flex: 1;
      text-align: left;

      > span {
        margin-left: 10px;
      }
    }

    > span:last-child {
      color: $theme_color;
      font-weight: bold;
    }

    .goods-price {
      font-size: 16px;
    }
  }
}

.order-mark {
  width: 500px;
  margin-bottom: 10px;
}

/** 购买商品列表 end */
/** 发票信息 start */
.invoice {
  .inv-tips {
    position: absolute;
    width: 310px;
    padding: 3px;
    margin: 0 0 0 10px;
    font-size: 12px !important;

    &::before {
      content: "";
      display: inline-block;
      width: 12px;
      height: 17px;
      background: url(../../assets/images/arrow-left.png) 0 0 no-repeat;
      background-color: #fff;
      position: absolute;
      left: -9px;
    }

    .ivu-icon {
      color: #ff8f23;
      margin-right: 3px;
      font-size: 16px;
      font-weight: bold;
    }
  }

  .inovice-content {
    > span {
      margin-right: 10px;
    }

    > span:last-child {
      color: $theme_color;
      cursor: pointer;

      &:hover {
        border-bottom: 1px solid $theme_color;
      }
    }
  }
}

/** 发票信息 end */

/** 订单价格 */
.order-price {
  text-align: right;
  margin-top: 30px;
  font-size: 16px;
  color: #999;

  > div > span:nth-child(2) {
    width: 130px;
    text-align: right;
    display: inline-block;
    margin-top: 10px;
  }

  .actrual-price {
    color: $theme_color;
    font-weight: bold;
    font-size: 20px;
  }
}

/** content end */
/** 底部支付栏 */
.order-footer {
  z-index: 20;
  height: 50px;
  @include background_color($light_white_background_color);
  @include title_color($title_color);
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  border-top: 1px solid #ddd;
  margin: 10px auto;

  div {
    text-align: center;
  }

  position: sticky;
  bottom: 0;

  .pay {
    background-color: $theme_color;
    width: 150px;
    font-size: 20px;
    color: #fff;
    height: 100%;
    line-height: 50px;
    cursor: pointer;
  }
}

/** 公共表头 */
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #dddddd;
  height: 40px;

  span:nth-child(1) {
    font-size: 18px;
  }

  span:nth-child(2) {
    font-size: 12px;
    color: #438cde;
    cursor: pointer;

    &:hover {
      color: $theme_color;
    }
  }
}

.ivu-divider {
  background: $theme_color;
  height: 2px;
}

.pay-address {
  font-size: 12px;
}

.more-addr {
  cursor: pointer;
  margin-top: 10px;
  display: inline-block;
}

.coupon-item {
  width: 260px;
  height: 125px;
  margin-right: 10px;
  margin-bottom: 10px;

  .c-right {
    width: 30px;
    padding: 10px 7px;
  }

  b {
    background: url("../../assets/images/small-circle.png") top left repeat-y;
    right: 28px;
  }

  .circle-top,
  .circle-bottom {
    right: 22px;
  }

  .used {
    position: absolute;
    top: 60px;
    right: 40px;
    width: 50px;
    height: 50px;
  }
}

.coupon-list {
  max-height: 260px;
  overflow: scroll;
}

.toolItem {
  display: flex;
  align-items: center;
}

.toolTitle {
  font-size: 14px;
  margin-left: 5px
}

.skuSpecClass {
  font-size: 12px;
  line-height: 22px;
  color: #8c8c8c;
  margin-top: 10px
}

</style>
